<template>
  <div class="co_canvasimg">
    <!-- <div class="co_can_top_tips">
			<img src="https://o6wndwjxn.qnssl.com/make.svg" alt="">
			<span>分享赚￥{{money}}</span>
		</div> -->
    <div class="co_can_top">
         <!--  -->
      <section
        v-if="image === ''"
        :class="seclect"
        class="hecheng"
      >
        <img
          :src="selectindexbgimage"
          class="box-seticon-img"
          crossOrigin='Anonymous'
        >
        <img
          class="kecheng-banner"
          crossOrigin='Anonymous'
          :src="img[1]"
        >
        <div class="kecheng-title">{{title}}</div>
        <section class="kecheng-flex">
          <img
            :src="img[4]"
            crossOrigin='Anonymous'
            class="info-avatar"
          >
          <section>
            <div class="user-name">{{nick_name}}</div>
            <div class="kecheng-tuiguang">
              给你推荐一门好课
              <!-- 邀请您一起学习好知识 -->
            </div>
          </section>
          <img
            crossOrigin='Anonymous'
            class="kecheng-erweima"
            :src="img[2]"
          >
        </section>
      </section>
      <img
        class="houhou"
        :src="image"
        v-if="image"
      >
      <!-- <canvas id="canvas" class="co_can_box" width="1200" height="2000"></canvas>
			<img :src="base64" crossOrigin='Anonymous' class="canvas_img" alt="">-->
      <div
        class="ca_tips"
        ref='dleft'
        :style="'left:calc'+ div_left"
      >长按上图保存图片,或发送给朋友</div>
    </div>

    <div class="co_can_bot">
      <div
        class="cocan_title"
        @click="cccb_click"
      >
        <img
          src="https://o6wndwjxn.qnssl.com/%E4%BF%A1%E5%B0%81%E6%89%93%E5%BC%80@2x.png"
          alt=""
        >
        <div>推荐语</div>
      </div>
      <div class="cocan_scroll">
        <div
          class="cocan_bot_box"
          :style="'width:'+ backgroundWidth +'px;'"
        >
          <div
            v-for="(item,index) in backgroundIcon"
            :key='index'
            @click="cocan_box_click(index)"
          >
            <img
              class="bt_box_item_img"
              :src="item"
              alt=""
            >
            <div
              class="cocan_box_select"
              v-if="cocan_box_select == index"
            >
              <img
                src="http://o6wndwjxn.qnssl.com/6d580201901041459077635.png"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- tips -->
    <div
      class="co_can_content"
      v-show="cccb_status"
      @click.self="cccb_click"
    >
      <div class="cocaco_box">
        <div class="cccb_title">
          分享到朋友圈，附上推荐语更有诚意。
        </div>
        <textarea
          type="text"
          class="cccb_content"
          ref='content'
          style="resize:none"
          v-model="textcontent"
        >
        </textarea>
        <div
          class="ccccb_button"
          v-clipboard:copy="textcontent"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >
          一键复制按钮
        </div>
      </div>
    </div>
    <div
      class="co_can_Tips"
      v-show="co_can_tips_status"
      @click="co_can_tips_click"
    >
      <Tips :type='co_can_tips'></Tips>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import html2canvas from 'html2canvas'
import {
  mapState
} from 'vuex'
import {
  merge_image_date
} from '@/api/coursedetails'
import Tips from '@/components/public/Tips.vue'
export default {
  components: {
    Tips
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      textcontent: '',
      image: '',
      seclect: 'box-seticon0',
      selectindexbgimage: '',
      // co_walt:false,
      type_type: 0,
      is_id: null,
      settime: false,
      gettime: null,
      cccb_status: false,
      div_left: 0,
      div_w: 0,
      img: [],
      backgroundImg: [], // 背景图
      backgroundIcon: [], // 小图片
      backgroundWidth: 0, // 底部长度
      title: '', // 课程名称
      curriculum_id: 0, // 课程id
      nick_name: '',
      base64: '',
      smallimg: '', // 小标签'
      w_dev: 0,
      c_dev: 0,
      t_dev: 0,
      money: 0,
      cocan_box_select: 0,
      copy_text: '',
      co_can_tips: '提示信息',
      co_can_tips_status: false,
      number: [
        [
          11, 27, 277, 150, // 课程
          110, 320, 80, 80, // 二维码
          0, 0, 60, 60, // 小标签
          20, 235, 25, // 头像
          15, // title字号
          0, 17, // 第一行字数
          17, 32, // 第二行字数
          247, 220, // 省略号位置
          20, 200, // 第一行位置
          20, 220, // 第二行位置
          15, // 昵称字号
          80, 257, // 昵称位置
          12, // 提示字号
          80, 277, // 提示位置
          9, // 推荐1字号
          150, 415, // 推荐1位置
          8, // 推荐2字号
          150, 435 // 推荐2位置
        ],
        [
          24, 251, 100, 60, // 课程
          180, 390, 60, 60, // 二维码
          0, 0, 60, 60, // 小标签
          30, 175, 30, // 头像
          14, // title字号
          0, 20, // 第一行字数
          10, 18, // 第二行字数
          250, 305, // 省略号位置
          130, 275, // 第一行位置
          130, 305, // 第二行位置
          15, // 昵称字号
          100, 195, // 昵称位置
          12, // 提示字号
          100, 210, // 提示位置
          8, // 推荐1字号
          210, 460, // 推荐1位置
          7, // 推荐2字号
          210, 475 // 推荐2位置
        ]
      ]
    }
  },
  created () {
    this.type_type = this.$route.query.type_type
    if (this.$route.query.is_id) {
      this.is_id = this.$route.query.is_id
    }
    this.co_walt = true
    this.curriculum_id = this.$route.query.curriculum_id
    this.getImg()
    // this.gettime = setTimeout(() => {
    //   if (!this.settime) {
    //     this.co_can_tips_status = true
    //     this.co_can_tips = '因网络延迟或微信缓存原因,图片未能成功生成.请检测网络状态或清除微信缓存!'
    //   }
    // }, 3000)
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.div_w = this.$refs.dleft.offsetWidth
    //   this.div_left = '(50vw - ' + this.div_w / 2 + 'px)'
    // })
  },
  methods: {
    co_can_tips_click () {
      this.co_can_tips = ''
      this.co_can_tips_status = false
    },
    onCopy (e) {
      // console.log('成功',e)
      this.cccb_click()
      this.co_can_tips = '复制成功'
      this.co_can_tips_status = true
    },
    onError (e) {
      this.co_can_tips = '复制失败'
      this.co_can_tips_status = true
    },
    cccb_click () {
      this.cccb_status = !this.cccb_status
    },
    getImg () {
      this.w_dev = window.devicePixelRatio
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        curriculum_id: this.curriculum_id,
        type_type: this.type_type,
        is_id: this.is_id
      }
      merge_image_date(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          // console.log(data)
          this.backgroundImg = data.backgroundImg
          this.selectindexbgimage = data.backgroundImg[0]
          this.backgroundIcon = data.backgroundIcon
          this.backgroundWidth = this.backgroundIcon.length * 90
          this.smallimg = data.smallimg
          this.img[0] = this.backgroundImg[0]
          this.img[1] = data.class_cover
          var er = data.erweima.split('/')
          var erweima = 'http://web.zhiyunzaixian.com/wechat_qrcode'
          for (var i = 3; i < er.length; i++) {
            erweima += '/' + er[i]
          }
          this.img[2] = erweima
          console.log(erweima)
          this.img[3] = this.smallimg
          var avatar = data.cover.split('/')
          // console.log(avatar)
          if (avatar[2] == 'o6wndwjxn.qnssl.com') {
            var cover = data.cover
          } else {
            var cover = 'http://web.zhiyunzaixian.com/wechat_image'
            for (var i = 3; i < avatar.length; i++) {
              cover += '/' + avatar[i]
            }
          }
          this.img[4] = cover
          this.title = data.title
          this.nick_name = data.nick_name
          this.money = data.share_money
          this.textcontent = `极力推荐，十万人都在学的《${this.title}》。长按图片扫码查看课程，动动手指，随时学知识。`
          this.$store.commit('updateLoadingStatus', { isLoading: false })
          this.$nextTick(() => {
            this.$vux.loading.show({
            })
            this.canvaspng()
            // this.copy_text = this.$refs.content.innerText
          })
        }
      })
    },
    canvaspng () {
      if (this.img.length > 0) {
        html2canvas(document.querySelector('.hecheng'), {
          useCORS: true
        }).then((canvas) => {
          this.imagesss = canvas.toDataURL()
          if (this.imagesss !== '') {
            this.$vux.loading.hide()
            this.image = this.imagesss
          }
        })
      }
    },
    // 选择
    cocan_box_click (e) {
      // this.$vux.loading.show({
      // })
      this.selectindexbgimage = this.backgroundImg[e]
      this.img[0] = this.backgroundImg[e]
      this.cocan_box_select = e
      this.$nextTick(() => {
        // this.canvas(e)
        this.seclect = `box-seticon${e}`
        this.image = ''
        setTimeout(() => {
          this.canvaspng()
        }, 1000)
      })
    },
    // 创建canvas画布
    canvas (e) {
      var c = document.getElementById('canvas')
      var ctx = c.getContext('2d')
      var len = this.img.length
      this.c_dev = ctx.backingStorePixelRatio ||
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1
      this.t_dev = (this.w_dev || 1) / this.c_dev
      c.width = 300 * this.t_dev
      c.height = 500 * this.t_dev
      ctx.rect(0, 0, c.width * this.t_dev, c.height * this.t_dev)
      ctx.clearRect(0, 0, c.width * this.t_dev, c.height * this.t_dev)
      ctx.fillStyle = '#333333'
      ctx.fill()
      // 判断第几个
      this.canvasimg(0, len, c, ctx, this.number[e - 1])
    },
    // 第一版
    canvasimg (n, len, c, ctx, num) {
      var that = this
      if (n < len) {
        var img = new Image()
        img.crossOrigin = 'anonymous'
        img.src = this.img[n]
        img.onload = function () {
          if (n == 0) { // 背景和文字
            ctx.drawImage(img, 0, 0, 300 * that.t_dev, 500 * that.t_dev)
            that.cantitle(c, ctx, num)
            that.cantips(ctx, num)
            that.canNickName(ctx, num)
            that.tiptitle(ctx, num)
            that.tipstext(ctx, num)
            // console.log('绘制背景文字')
          } else if (n == 1) { // 课程
            ctx.drawImage(img, num[0] * that.t_dev, num[1] * that.t_dev, num[2] * that.t_dev, num[3] * that.t_dev)
            // console.log('绘制课程')
          } else if (n == 2) { // 二维码
            ctx.drawImage(img, num[4] * that.t_dev, num[5] * that.t_dev, num[6] * that.t_dev, num[7] * that.t_dev)
            // console.log('绘制二维码')
          } else if (n == 3) { // 小标签
            ctx.drawImage(img, num[8] * that.t_dev, num[9] * that.t_dev, num[10] * that.t_dev, num[11] * that.t_dev)
            // console.log('绘制小标签')
          } else if (n == 4) { // 头像
            that.circleImg(ctx, img, num[12] * that.t_dev, num[13] * that.t_dev, num[14] * that.t_dev)
            // console.log('绘制头像',img)
          }
          that.canvasimg(n + 1, len, c, ctx, num)
        }
      } else {
        // console.log('生成成功')
        this.settime = true
        var img = c.toDataURL('image/jpeg')
        this.base64 = img
      }
    },
    cantitle (c, ctx, num) {
      ctx.font = 'normal normal bold ' + num[15] * this.t_dev + 'px 微软雅黑'
      ctx.fillStyle = 'black'
      ctx.textBseline = 'middle'
      ctx.textAlign = 'left'
      var title = this.title
      var len = this.title.length
      var title_one = title.substring(num[16], num[17])
      var title_two = title.substring(num[18], num[19])
      if (len > num[19]) {
        var title_dian = '......'
        ctx.fillText(title_dian, num[20] * this.t_dev, num[21] * this.t_dev)
      }
      ctx.fillText(title_one, num[22] * this.t_dev, num[23] * this.t_dev)
      ctx.fillText(title_two, num[24] * this.t_dev, num[25] * this.t_dev)
    },
    canNickName (ctx, num) {
      ctx.font = 'normal normal normal ' + num[26] * this.t_dev + 'px PingFang-SC-Medium'
      ctx.fillStyle = '#333333'
      ctx.textAlign = 'left'
      ctx.textBseline = 'middle'
      ctx.fillText(this.nick_name, num[27] * this.t_dev, num[28] * this.t_dev)
    },
    cantips (ctx, num) {
      ctx.font = 'normal normal normal ' + num[29] * this.t_dev + 'px PingFang-SC-Medium'
      ctx.fillStyle = '#666666'
      ctx.textBseline = 'middle'
      ctx.textAlign = 'left'
      ctx.fillText('推荐一门好课', num[30] * this.t_dev, num[31] * this.t_dev)
    },
    tiptitle (ctx, num) {
      ctx.font = 'normal normal normal ' + num[32] * this.t_dev + 'px PingFang-SC-Medium'
      ctx.fillStyle = '#333333'
      ctx.textBseline = 'middle'
      ctx.textAlign = 'center'
      ctx.fillText('帮你抓住更多赚钱机会', num[33] * this.t_dev, num[34] * this.t_dev)
    },
    tipstext (ctx, num) {
      ctx.font = 'normal normal normal ' + num[35] * this.t_dev + 'px PingFang-SC-Medium'
      ctx.fillStyle = '#999999'
      ctx.textBseline = 'middle'
      ctx.textAlign = 'center'
      ctx.fillText('长按识别查看课程', num[36] * this.t_dev, num[37] * this.t_dev)
    },
    // 第一版结束
    // 通用
    // 网上的封装风法
    circleImg (ctx, img, x, y, r) {
      ctx.save()
      var d = 2 * r
      var cx = x + r
      var cy = y + r
      ctx.beginPath()
      ctx.arc(cx, cy, r, 0, 2 * Math.PI)
      ctx.clip()
      ctx.drawImage(img, x, y, d, d)
    }
  }
}
</script>

<style lang="less" scoped>
.houhou {
  position: fixed;
  z-index: 100000;
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  top: calc(10 / 750 * 100vw);
  left: 50%;
  transform: translate(-50%, 0);
}
.hecheng {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
}
.box-seticon0 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  .kecheng-banner {
    width: calc(460 / 750 * 100vw);
    height: calc(266 / 750 * 100vw);
    display: block;
    border-radius: calc(10 / 750 * 100vw) calc(10 / 750 * 100vw) 0px 0px;
    margin: calc(85 / 750 * 100vw) auto calc(10 / 750 * 100vw) auto;
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .kecheng-flex section {
    flex: 1;
    width: 90%;
  }
  .user-name {
    color: #333;
  }
  .kecheng-title {
    width: calc(488 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
    color: #333;
    margin: 0 auto;
    text-align: center;
  }
  .info-avatar {
    width: calc(72 / 750 * 100vw);
    height: calc(72 / 750 * 100vw);
    border-radius: 50%;
    box-sizing: border-box;
    margin-right: calc(20 / 750 * 100vw);
  }
  .kecheng-tuiguang {
    color: #666;
    width: 50%;
    height: 20px;
  }
  .kecheng-erweima {
    position: absolute;
    top: calc(620 / 750 * 100vw);
    width: calc(146 / 750 * 100vw);
    height: calc(146 / 750 * 100vw);
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.box-seticon1 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .user-name {
    margin-top: calc(50 / 750 * 100vw);
    margin-left: calc(100 / 750 * 100vw);
    color: #333;
    font-size: calc(22 / 750 * 100vw);
  }
  .kecheng-banner {
    width: calc(488 / 750 * 100vw);
    height: calc(268 / 750 * 100vw);
    display: block;
    margin: calc(50 / 750 * 100vw) auto calc(20 / 750 * 100vw) auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(488 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    color: #333333;
    margin: 0 auto;
    text-align: center;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    top: calc(500 / 750 * 100vw);
    left: calc(50 / 750 * 100vw);
  }
  .kecheng-tuiguang {
    position: absolute;
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: calc(30 / 750 * 100vw);
    color: #ffffff;
  }
  .kecheng-erweima {
    position: absolute;
    top: calc(620 / 750 * 100vw);
    width: calc(146 / 750 * 100vw);
    height: calc(146 / 750 * 100vw);
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.box-seticon2 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(488 / 750 * 100vw);
    height: calc(268 / 750 * 100vw);
    display: block;
    margin: calc(158 / 750 * 100vw) auto calc(20 / 750 * 100vw) auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(488 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    color: #333333;
    margin: 0 auto;
    text-align: center;
  }
  .kecheng-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(25 / 750 * 100vw);
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(12 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: calc(24 / 750 * 100vw);
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: calc(20 / 750 * 100vw);
    color: #999;
  }
  .kecheng-erweima {
    width: calc(211 / 750 * 100vw);
    height: calc(211 / 750 * 100vw);
  }
}
.box-seticon3 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(290 / 750 * 100vw);
    height: calc(160 / 750 * 100vw);
    display: block;
    margin: calc(116 / 750 * 100vw) 0 calc(10 / 750 * 100vw)
      calc(56 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(488 / 750 * 100vw);
    font-size: 12px;
    color: #333333;
    margin: 0 auto;
    text-align: center;
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    margin: calc(22 / 750 * 100vw) auto;
    box-sizing: border-box;
    margin-left: calc(55 / 750 * 100vw);
    margin-top: calc(330 / 750 * 100vw);
  }
  .kecheng-flex section > div {
    display: inline-block;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    color: #333333;
    font-size: 10px;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: 10px;
    color: #999;
    margin-left: calc(140 / 750 * 100vw);
  }
  .kecheng-erweima {
    width: calc(211 / 750 * 100vw);
    height: calc(211 / 750 * 100vw);
    position: absolute;
    top: calc(399 / 750 * 100vw);
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.box-seticon4 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(468 / 750 * 100vw);
    height: calc(257 / 750 * 100vw);
    display: block;
    border-radius: calc(10 / 750 * 100vw) calc(10 / 750 * 100vw) 0px 0px;
    margin: calc(150 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    margin-top: calc(20 / 750 * 100vw);
    font-family: PingFangSC-Medium;
    width: calc(411 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
    color: #333333;
    margin: 0 auto;
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 80%;
    padding: 0 calc(20 / 750 * 100vw);
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: calc(30 / 750 * 100vw);
    // margin-top: calc(372 / 750 * 100vw);
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: calc(24 / 750 * 100vw);
    color: #999;
    font-size: 12px;
  }
  .kecheng-erweima {
    width: calc(211 / 750 * 100vw);
    height: calc(211 / 750 * 100vw);
    top: calc(670 / 750 * 100vw);
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
  }
}
.box-seticon5 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(430 / 750 * 100vw);
    height: calc(238 / 750 * 100vw);
    display: block;
    margin: calc(307 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    margin-top: calc(20 / 750 * 100vw);
    font-family: PingFangSC-Medium;
    width: calc(430 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    color: #333333;
    margin: 0 auto;
    text-align: left;
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 80%;
    padding: 0 calc(20 / 750 * 100vw);
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: calc(20 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    width: calc(170 / 750 * 100vw);
    height: calc(170 / 750 * 100vw);
  }
}
.box-seticon6 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(430 / 750 * 100vw);
    height: calc(238 / 750 * 100vw);
    display: block;
    margin: calc(66 / 750 * 100vw) 0 calc(20 / 750 * 100vw)
      calc(133 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    margin-left: calc(132 / 750 * 100vw);
    font-size: calc(25 / 750 * 100vw);
    color: #fff;
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    margin-left: calc(211 / 750 * 100vw);
    margin-top: calc(188 / 750 * 100vw);
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: 10px;
    color: #fff;
  }
  .kecheng-erweima {
    width: calc(138 / 750 * 100vw);
    height: calc(138 / 750 * 100vw);
    position: absolute;
    top: calc(790 / 750 * 100vw);
    left: calc(431 / 750 * 100vw);
  }
}
.box-seticon7 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(231 / 750 * 100vw);
    height: calc(127 / 750 * 100vw);
    display: block;
    margin: calc(120 / 750 * 100vw) 0 calc(20 / 750 * 100vw)
      calc(40 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    font-size: calc(25 / 750 * 100vw);
    color: #333;
    position: absolute;
    left: calc(281 / 750 * 100vw);
    top: calc(137 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 90%;
    height: calc(138 / 750 * 100vw);
    padding: calc(20 / 750 * 100vw);
    margin: 0 auto;
    box-sizing: border-box;
    margin-left: calc(28 / 750 * 100vw);
    margin-top: calc(48 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    width: calc(138 / 750 * 100vw);
    height: calc(138 / 750 * 100vw);
    top: calc(790 / 750 * 100vw);
    left: calc(431 / 750 * 100vw);
  }
}
.box-seticon8 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(430 / 750 * 100vw);
    height: calc(238 / 750 * 100vw);
    display: block;
    margin: calc(164 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(280 / 750 * 100vw);
    font-size: 12px;
    color: #333333;
    margin-top: calc(30 / 750 * 100vw);
    margin-left: calc(80 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: calc(70 / 750 * 100vw);
    // transform: translate(-50%, 0);
    top: calc(80 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    position: absolute;
    width: calc(145 / 750 * 100vw);
    height: calc(145 / 750 * 100vw);
    top: calc(341 / 750 * 100vw);
    left: calc(310 / 750 * 100vw);
    // z-index: 1000;
  }
}
.box-seticon9 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(522 / 750 * 100vw);
    height: calc(287 / 750 * 100vw);
    display: block;
    margin: calc(206 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(330 / 750 * 100vw);
    font-size: 12px;
    color: #fff;
    margin-top: calc(10 / 750 * 100vw);
    margin-left: calc(35 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(130 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    position: absolute;
    width: calc(219 / 750 * 100vw);
    height: calc(219 / 750 * 100vw);
    top: calc(458 / 750 * 100vw);
    left: calc(10 / 750 * 100vw);
  }
}
.box-seticon10 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(170 / 750 * 100vw);
    height: calc(100 / 750 * 100vw);
    display: block;
    margin: calc(489 / 750 * 100vw) 0 0 calc(50 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(330 / 750 * 100vw);
    font-size: 12px;
    color: #333;
    position: absolute;
    top: calc(489 / 750 * 100vw);
    left: calc(240 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: 7%;
    top: calc(355 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #333;
  }
  .kecheng-erweima {
    position: fixed;
    width: calc(150 / 750 * 100vw);
    height: calc(150 / 750 * 100vw);
    top: calc(778 / 750 * 100vw);
    left: calc(438 / 750 * 100vw);
  }
}
.box-seticon11 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(358 / 750 * 100vw);
    height: calc(197 / 750 * 100vw);
    display: block;
    margin-top: calc(206 / 750 * 100vw);
    margin-left: calc(20 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(330 / 750 * 100vw);
    font-size: 12px;
    color: #fff;
    margin-top: calc(10 / 750 * 100vw);
    margin-left: calc(35 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: calc(20 / 750 * 100vw);
    top: calc(130 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: calc(20 / 750 * 100vw);
    color: #999;
  }
  .kecheng-erweima {
    position: absolute;
    width: calc(170 / 750 * 100vw);
    height: calc(170 / 750 * 100vw);
    top: calc(458 / 750 * 100vw);
    left: calc(94 / 750 * 100vw);
  }
}
.box-seticon12 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(430 / 750 * 100vw);
    height: calc(238 / 750 * 100vw);
    display: block;
    margin: calc(137 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    margin-top: calc(20 / 750 * 100vw);
    font-family: PingFangSC-Medium;
    width: calc(428 / 750 * 100vw);
    font-size: 15px;
    color: #333333;
    margin-left: calc(90 / 750 * 100vw);
  }
  .kecheng-flex {
    display: flex;
    width: 80%;
    padding: 0 calc(20 / 750 * 100vw);
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: calc(20 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    width: calc(130 / 750 * 100vw);
    height: calc(130 / 750 * 100vw);
  }
}
.box-seticon13 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(367 / 750 * 100vw);
    height: calc(202 / 750 * 100vw);
    display: block;
    margin: calc(179 / 750 * 100vw) auto calc(20 / 750 * 100vw) auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(450 / 750 * 100vw);
    font-size: 12px;
    color: #333333;
    margin-left: calc(30 / 750 * 100vw);
    text-align: left;
  }
  .kecheng-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(75 / 750 * 100vw);
    margin-left: calc(225 / 750 * 100vw);
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(12 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: calc(24 / 750 * 100vw);
    color: #333333;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    width: calc(154 / 750 * 100vw);
    height: calc(154 / 750 * 100vw);
    position: absolute;
    left: calc(126 / 750 * 100vw);
    top: calc(485 / 750 * 100vw);
  }
}
.box-seticon14 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(367 / 750 * 100vw);
    height: calc(202 / 750 * 100vw);
    display: block;
    margin-top: calc(89 / 750 * 100vw);
    margin-left: calc(30 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    width: calc(544 / 750 * 100vw);
    color: #fff;
    margin-left: calc(30 / 750 * 100vw);
    text-align: left;
    margin-top: calc(10 / 750 * 100vw);
  }
  .kecheng-flex {
    display: flex;
    justify-content: center;
    margin-top: calc(50 / 750 * 100vw);
    margin-left: calc(125 / 750 * 100vw);
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(12 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: calc(24 / 750 * 100vw);
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    margin-right: calc(12 / 750 * 100vw);
    font-size: 10px;
    color: #fff;
  }
  .kecheng-erweima {
    width: calc(154 / 750 * 100vw);
    height: calc(154 / 750 * 100vw);
  }
}
.box-seticon15 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(382 / 750 * 100vw);
    height: calc(210 / 750 * 100vw);
    display: block;
    margin: calc(310 / 750 * 100vw) auto 0 auto;
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(380 / 750 * 100vw);
    font-size: 12px;
    color: #fff;
    margin-top: calc(10 / 750 * 100vw);
    margin-left: calc(105 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: calc(100 / 750 * 100vw);
    top: calc(208 / 750 * 100vw);
    // transform: translate(-50%, 0);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #999;
  }
  .kecheng-erweima {
    position: absolute;
    width: calc(202 / 750 * 100vw);
    height: calc(202 / 750 * 100vw);
    top: 54vw;
    left: 12vw;
    // transform: translate(-50%, 0);
  }
}
.box-seticon16 {
  width: calc(600 / 750 * 100vw);
  height: calc(949 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0 auto;
  position: relative;
  overflow: hidden;
  .kecheng-banner {
    width: calc(358 / 750 * 100vw);
    height: calc(197 / 750 * 100vw);
    display: block;
    margin-top: calc(220 / 750 * 100vw);
    margin-left: calc(20 / 750 * 100vw);
  }
  .kecheng-title {
    font-family: PingFangSC-Medium;
    width: calc(330 / 750 * 100vw);
    font-size: 12px;
    color: #fff;
    margin-top: calc(10 / 750 * 100vw);
    margin-left: calc(20 / 750 * 100vw);
  }
  .kecheng-flex {
    align-items: center;
    display: flex;
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(145 / 750 * 100vw);
  }
  .kecheng-flex section {
    flex: 1;
  }
  .info-avatar {
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    margin-right: calc(20 / 750 * 100vw);
  }
  .user-name {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #fff;
  }
  .kecheng-tuiguang {
    border-radius: 50%;
    top: calc(515 / 750 * 100vw);
    left: calc(170 / 750 * 100vw);
    font-family: PingFangSC-Regular;
    font-size: 10px;
    color: #fff;
  }
  .kecheng-erweima {
    position: fixed;
    width: calc(197 / 750 * 100vw);
    height: calc(197 / 750 * 100vw);
    top: calc(358 / 750 * 100vw);
    left: calc(-160 / 750 * 100vw);
  }
}
.box-seticon-img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
/* 注释 */
.co_can_Tips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110;
}
.co_can_content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  color: #333333;
}
.cocaco_box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 35vh;
  background: white;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.ccccb_button {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 8vh;
  line-height: 8vh;
  background: #f29911;
  text-align: center;
  color: white;
  font-size: 15px;
}
.cccb_title {
  text-align: center;
  font-size: 14px;
  color: #362d2d;
  height: 20px;
  line-height: 20px;
  margin: 15px 0;
}
.cccb_title > img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  /* margin-top:-1px ; */
}
.cccb_content {
  width: 86vw;
  height: 40%;
  margin: 0 7vw;
  font-size: 15px;
  color: #362d2d;
  text-align: justify;
}

.ca_tips {
  position: absolute;
  bottom: 5px;
  color: white;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}
.ca_tips:after,
.ca_tips:before {
  position: absolute;
  content: "";
  width: 25px;
  height: 1px;
  top: 49%;
  background: white;
}

.ca_tips:after {
  left: -30px;
}

.ca_tips:before {
  right: -30px;
}

.co_canvasimg {
  width: 100vw;
  height: 100vh;
  background: #333333;
  overflow: hidden;
}

.co_can_top {
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: calc(100vh - 80px);
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  overflow: hidden;
  z-index: 10;
}

.co_can_bot {
  background: white;
  height: 80px;
  width: 100vw;
  overflow: hidden;
  display: flex;
}
.cocan_title {
  /* flex: 100px; */
  width: 90px;
  overflow: hidden;
  position: relative;
}
.cocan_title:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 60px;
  right: 0;
  top: 10px;
  background: #e6e6e6;
}
.cocan_title > img {
  width: 50px;
  height: 50px;
  margin-left: 20px;
  margin-top: 8px;
}
.cocan_title > div {
  color: #333333;
  text-align: center;
  font-size: 13px;
}
.cocan_scroll {
  flex: 1;
  overflow: scroll;
}

.co_can_box {
  width: 3px;
  height: 5px;
  background: #333333;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0);
}

.canvas_img {
  position: absolute;
  z-index: 10;
  left: calc(50vw - (100vw * 0.66 / 2));
  top: calc(50vh - 40px - (100vw * 0.66 * 1.6 / 2));
  width: calc(100vw * 0.66);
  height: calc(100vw * 0.66 * 1.6);
}

.co_can_top_tips {
  position: fixed;
  right: 0;
  top: 60px;
  width: 105px;
  height: 30px;
  line-height: 30px;
  text-indent: 30px;
  font-size: 11px;
  color: white;
  background: rgba(0, 167, 156, 0.6);
  border-radius: 500px 0 0 500px;
  z-index: 100;
}

.co_can_top_tips > img {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  top: 5px;
}

.cocan_bot_box {
  height: 80px;
  overflow: hidden;
}

.cocan_bot_box > div {
  display: inline-block;
  position: relative;
}

.bt_box_item_img {
  width: 70px;
  height: 70px;
  margin: 5px 10px;
  border-radius: 5px;
}

.cocan_box_select {
  position: absolute;
  left: 10px;
  top: 5px;
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cocan_box_select > img {
  height: 30px;
  width: 30px;
}
.user-name{
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-box-orient: vertical; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>
